5-1-1. 基本構成と役割
FLOCSSは、次の3つのレイヤーと３つの子レイヤーで構成されています。
| レイヤー名 | 説明 |
|---|---|
| Foundation | Reset.cssやNormalize.cssなどのブラウザごとの表示を統一するためのスタイル。及び、要素セレクタを使ったサイト全体の基本となるスタイルを定義します。 |
| Layout | ヘッダー、フッター、メインエリア、サブエリアなどのページを大きく切り分けるレイアウト要素を定義します。 |
| Object | Webサイトの中で用いられるすべての モジュールを総称して定義します。Objectは、さらに３つの子レイヤーに分かれます。 |
| Component（Objectの子レイヤー） | 複数ページに共通で用いる汎用モジュールを定義します。 |
| Project（Objectの子レイヤー） | ページ/ディレクトリ単位の独自モジュールを定義します。ここで定義されるモジュールは当該のページ/ディレクトリ以外では使用されません。 |
| Utility（Object子レイヤー） | 調整用のマージン・パディング設定やclearfixといった汎用クラスを定義します。clearfixのような特殊なクラスを除き、各クラスは単一の指定だけを有します。 |
cssの優先度はFoundation < プラグイン関連 < Layout < Component < Project < Utilityとなります。